<template>
  <view>
    <view class="loading" v-if="loadings_">
      <u-loading-page loading-mode="spinner" :loading="loadings_" loading-text="正在加载..."></u-loading-page>
    </view>
    <view v-else :class="!is_footer_mar && 'loading_footer'">
      <slot></slot>
      <is-loading></is-loading>
      <b-message ref="msg"></b-message>
      <view class="bottom_footer">
        {{ is_footer_name }}
      </view>
      <!-- <b-modal :type="type" @type="val => type = val"></b-modal> -->
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <u-modal :show="isLogin_" title="提示" :asyncClose="true">
      <view>你还没有登录，是否登录？</view>
      <template #confirmButton>
        <view class="modal_btn">
          <u-button type="primary" :plain="true" class="modal_btn_b" :customStyle="{ border: 'none' }"
            @click="close_">取消</u-button>
          <u-button class="modal_btn_b" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
            :customStyle="{ border: 'none' }">授权</u-button>
        </view>
      </template>
    </u-modal>
    <!-- #endif -->
    <!-- #ifdef MP-TOUTIAO -->
    <u-modal :show="isLogin_" title="提示" :asyncClose="true">
      <view>你还没有登录，是否登录？</view>
      <template #confirmButton>
        <view class="modal_btn">
          <u-button type="primary" :plain="true" class="modal_btn_b" :customStyle="{ border: 'none' }"
            @click="close_">取消</u-button>

          <button class="modal_btn_b" data-eventsync="true" @click="getUserInfo"
            :customStyle="{ border: 'none' }">授权</button>
        </view>
      </template>
    </u-modal>
    <!-- #endif -->
    <b-tabbar></b-tabbar>
  </view>
</template>
<script lang="ts" setup>
/**
 * 组件 HeadTop 主要防止白屏的出现
 * @param {
 *  loading bool 参数 true 的时候显示，
 *  is_footer bool 是否显示全局底部的名字
 * is_footer_name string   底部显示名字
  }
 */
import isLoading from "@/components/BLoading/index.vue";
import BMessage from '@/components/BMessage/BMessage.vue'
import BTabbar from '@/components/BTabbar/BTabbar.vue'
import BModal from '@/components/BModal/BModal.vue'

import { computed, ref, watch, toRef, getCurrentInstance, toRefs, nextTick } from "vue";
import { componentsStore } from '@/store/modules/components'
import { onShow, onLoad } from "@dcloudio/uni-app";
import { setApiData } from '@/hooks'
import { set_, timeTo } from "@/utils";
const { setApi } = setApiData()
const store = componentsStore()
export interface Props {
  loading?: boolean
  is_footer?: boolean
  is_footer_name?: string,
  is_footer_mar?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  loading: false,
  is_footer: false,
  is_footer_name: '',
  is_footer_mar: true
})
const { loading } = toRefs(props);
const loadings_ = ref<boolean>(false);
const isLogin_ = ref<boolean>(false)
const loading_ = ref<boolean>(store.loading_)
const douyin = ref<boolean>(false)

const msg = ref()
const type = ref<number>(2)
const Msg = ref<string>('')
watch(loading, (val) => {
  loadings_.value = val
}, { immediate: true, deep: true })
store.$subscribe((i, node) => {
  // loadings_.value = node.headTop
  if (node.opts && node.opts.text) Msg.value = node.opts
  isLogin_.value = node.isLogin
  loading_.value = node.loading_
})
watch(isLogin_, (val, oll) => {
  // #ifdef MP-TOUTIAO
  if (val) {

    getSetting()
  }
  // #endif
})
watch(loading_, (val) => {
  loading_.value = val
  if (val) {
    setTimeout(() => {
      // store.loadingFn_(false)
    }, 5000)
  }
}, { deep: true, immediate: true })
watch(Msg, (val) => {
  if (val) {
    msg.value.show(val)
  }
}, { immediate: true, deep: true })
const telloading = ref<boolean>(false)

// #ifdef MP-WEIXIN
onShow(() => {
  getSetting()
})
// #endif

const loginCode = ref<string>('')
function getSetting() {
  loginCode.value = ''
  uni.login({
    force: true,
    success: async (res) => {
      console.log(res, 'res')
      if (res.code) {
        loginCode.value = res.code
      }
    }
  });

}
function getUserInfo(e) {
  tt.getUserProfile({
    force: true,
    success: e => {
      if (e.userInfo) {
        nextTick(() => {
          setApi({ name: 'douinLogin', param: [{ code: loginCode.value, nickname: e.userInfo.nickName, avatarUrl: e.userInfo.avatarUrl }] })
            .then((e) => {
              store.isLoginFN(false)
              if (e.code == 200) {
                set_('Token', e.data.token)
                emit('isLogin_', true)
              }
            })
        })
      }
    },
    fail: err => {
      console.log(err, 'ee')
    }
  })

}
const emit = defineEmits({})
function login(e) {
  nextTick(async () => {
    const result = await setApi({
      name: 'wxlogin',
      param: [{ code: loginCode.value, phoneCode: e }]
    })
    store.isLoginFN(false)
    if (result.code == 200) {
      set_('Token', result.data.token)
      emit('isLogin_', true)
    }
  })
}
function close_() {
  store.isLoginFN(false)
  store.isTabbarFn('home')
  uni.reLaunch({
    url: '../../pages/index/index'
  })
}
function getPhoneNumber(e) {
  if (e.detail.code) {
    login(e.detail.code)
  } else {

  }
}
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
